<template>
  <HeaderLayout title = '已报名会议' :visibleMenu="false">
    <div class="back" slot='left' @click="handleBack"><Icon name = 'arrow-left' /></div>
    
    <div class="list">
      <Card
        v-for="(v, i) in data"

        :startDate = "v.startDate"
        :endDate = "v.endDate"
        :title = "v.title"
        :location = "v.location"
        :flat = "true"

        :key="i"
      >
        <div slot='right' class="card-action" v-if="v.status">
          <div class="card-action-item card-action-item-modify" @click="handleEdit(v, i, $event)">修改</div>
          <div class="card-action-item card-action-item-cancel" @click="handleCancel(v, i, $event)">取消</div>
        </div>
        <div slot='right' class="card-action" v-if="!v.status">
          <div class="card-action-item" :disabled="v.status">已取消</div>
        </div>
      </Card>
    </div>
  </HeaderLayout>
</template>

<script>

import { Icon, Button } from 'vant'
import HeaderLayout from '@/layout/headerLayout/index.vue'
import Card from '@/component/card/index.vue'

// 模拟数据
function fakeData () {
  return [...Array(10)].map((v, i) => ({
    startDate: new Date().getTime(),
    endDate: new Date().getTime(),
    title: '第二届中国医师协会神经介入年会',
    location: '广州南丰朗豪酒店',
    status: i % 2
  }))
}

export default {

  name: 'index',

  data () {
    return {
      data: fakeData()
    }
  },

  methods: {
    handleBack: function () {
      this.$router.go(-1)
    },
    handleEdit: function (v, i, e) {
      console.log('修改', i)
      this.$router.push(`/i/meeting/${ i }`)
    },
    handleCancel: function (v, i, e) {
      console.log('取消', i)
    }
  },

  components: {
    HeaderLayout,
    Icon,
    Button,
    Card,
  },
}

</script>

<style lang="less" scoped>

.back {
  i {
    color: #fff;
  }
}

.list {
  .card {
    margin: 6px 0;
  }
}

.swipe-delete {
  background: #f91a07;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 42px;
  height: 100%;
  margin-left: 4px;
}

.card-action {
  display: flex;
  margin-bottom: -18px;
  margin-right: 3px;

  &-item {
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    color: #fff;
    text-align: center;
    padding: 0 12px;
    border-radius: 5px 5px 0 0;
    margin: 0 1px;

    &-modify {
      background-color: #FFC03C;
    }

    &-cancel {
      background-color: #A8D8EF;
    }

    &[disabled],
    &.disabled {
      background-color: #BABABA !important;
      pointer-events: none;
    }
  }
}

</style>